<template>
  <div>
    <!-- 生命周期：从创建到销毁的过程
     创建期：
           创建前：beforeCreate,不能访问this，不能使用data属性与methods方法
           创建后: created可以使用this,但是还不能访问vue渲染后的dom
      渲染期
           渲染前：beforeMount:读取了template内的内容，并解析了，但还没渲染完成
           渲染后:mounted:渲染后，它是第一个可以访问vue渲染后的dom的生命周期钩子
      更新期
           更新前：beforeUpdate:前置条件（vue在页面上使用的相关数据有修改），且渲染没有完成
           更新后:updated  vue在页面上使用的相关数据有修改,且渲染完成
      销毁期
           销毁前:beforeDestroy:准备销毁该组件，什么都可访问,常用于一些善后处理：如setInterval清除
           销毁后:destroyed，本质上是中断渲染,它还是可以访问data属性之类 ，只是不能访问vue渲染后的dom,常用于一些善后处理：如setInterval清除
    
    created:进入页面接口请求之类 操作
    mounted:进入页面dom操作
    beforeDestroy：善后处理
    
    -->
    <button @click="bol = !bol">销毁子组件</button>
    <DrSon3 v-if="bol"></DrSon3>
  </div>
</template>
<script>
import DrSon3 from '@/components/DrSon3'
export default {
  data () {
    return {
      bol: true
    }
  },
  components: {
    DrSon3
  }
}
</script>
<style></style>
